<template>
  <div class="container">
      <div class="noList" v-if="menuList.length == 0">
            <img :src="indexImg" alt="">
            <view class="section">
                <p>先选择你要做的菜的类型</p>
                <picker @change="bindPickerChange" :value="index" :range="array">
                    <view class="picker">
                    当前选择：{{array[index]}}
                    </view>
                </picker>
            </view>
            <div class="get_btn_box">
                <button @click="goSearchPage">自己去搜索</button>
                <button @click="getList">随便来一道</button>
            </div>
            
      </div>
      <div v-else class="menu">
          <ul>
              <li class="menu-item" @click="goInfo(item._id,item.img)" v-for="item in menuList" :key="item.name">
                  <img :src="item.img" alt="">
                  <p>{{item.name}}</p>
              </li>
          </ul>
          <div class="btn_box">
            <button @click="clearMenu">返回</button>
            <button @click="getList">再来一道</button>
          </div>
          
      </div>
      
    <!-- <div class="search">
        <img :src="searchButton" alt="">
    </div> -->
  </div>
</template>

<script>
import indexImg from '../../images/indexImg.jpg'
import searchButton from '../../images/search.png'
import { getMenuList } from '../../server/getData.js'
import menuType from '../../tools/menuType.js'

export default {
  data () {
    return {
        index:'0',
        array: menuType,
      indexImg,
      searchButton,
      menuList:[]
    }
  },

  methods: {
      bindPickerChange(item){
          this.index = item.target.value
      },
    getList(){
        let parmas = {
            name:'',
            type:this.index - 0 + 1,
            isRandom:'true'
        }
        getMenuList(parmas,res=>{
            console.log(res.list[0])
            this.menuList = res.list
        })
    },
    goInfo(id,img){
        var url = "../menuInfo/main?id=" + id + '&img=' +img
        wx.navigateTo({url})
    },
    goSearchPage(){
        let url = '../search/main'
        wx.navigateTo({url})
    },
    clearMenu(){
        this.menuList = []
    }
  },

  created () {
    //   this.getList()
  }
}
</script>

<style scoped>
.menu-item{
    padding:20px 5% 0;
}
.menu-item img {
    width: 100%;
}
.menu-item p {
    text-align: center;
    line-height: 30px;
}
.search {
    width: 30px;
    height: 50px;
}
.search img{
    width: 30px;
    height: 30px;
}
.picker {
    text-align: left;
    padding: 0 10px;
    margin: 20px 0;
    line-height: 40px;
    height: 40px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.section p{
    margin-top: 20px;
    padding: 0 20px;
}
.btn_box {
    display: flex;
    padding-top: 50px;
}
.btn_box button{
    width: 40%;
    font-size: 20px;
}
.btn_box button:nth-child(2){
    background: #3385ff;
    color: #fff;
}
.get_btn_box{
    display: flex;
    padding-top: 40px;
}
.get_btn_box button{
    background: #3385ff;
    color: #fff;
    width: 35%;
    font-size: 18px;
}
</style>
